<template>
	<view>
		<navigator :url="`/pages/post/detail?id=${post.id}`" v-for="post in postList" :key="post.id" class="post-item">
			<!-- 用户信息 -->
			<view class="user-info">
				<image @click.stop="onAvatar(post)" :src="utils.imgPath(post.user.avatar) || '/static/logo.png'"
					class="avatar" mode="aspectFill"></image>
				<view class="user-details">
					<text class="nickname">{{ post.user.nickname }}</text>
					<text class="time">{{ formatRelativeTime(post.created_at) }}</text>
				</view>
			</view>
			<!-- 帖子内容 -->
			<view class="post-content">
				<view class="title">{{ post.title }}</view>
				<wd-text :text="post.content" :lines="3" size="32rpx" color="#000" lineHeight="1.7"></wd-text>
				<!-- 媒体内容 -->
				<view v-if="post.media && post.media.length > 0" class="media-container">
					<!-- 1张图片：大图显示 -->
					<view v-if="post.media.length === 1" class="media-single">
						<image :src="utils.imgPath(post.media[0])" @click.stop="utils.previewImage(post.media)"
							class="media-single-image" mode="aspectFill"></image>
					</view>
					<!-- 2张图片：并排显示 -->
					<view v-else-if="post.media.length === 2" class="media-double">
						<image v-for="(media, index) in post.media" :key="index"
							@click.stop="utils.previewImage(post.media, index)" :src="utils.imgPath(media)"
							class="media-double-image" mode="aspectFill"></image>
					</view>
					<!-- 3张及以上：网格布局 -->
					<view v-else class="media-grid">
						<image v-for="(media, index) in post.media" :key="index"
							@click.stop="utils.previewImage(post.media, index)" :src="utils.imgPath(media)"
							class="media-grid-image" mode="aspectFill"></image>
					</view>
				</view>
				<!-- footer -->
				<view class="footer">
					<view class="count-item">
						<wd-icon name="browse" size="32rpx"></wd-icon>
						<view class="number">{{ post.view_count }}</view>
					</view>
					<view class="count-item">
						<wd-icon name="chat1" size="32rpx"></wd-icon>
						<view class="number">{{ post.comment_count }}</view>
					</view>
					<view class="count-item">
						<wd-icon name="heart" size="32rpx"></wd-icon>
						<view class="number">{{ post.like_count }}</view>
					</view>
				</view>
			</view>
		</navigator>

		<!-- 加载状态 -->
		<q-loadmore :list="postList" :status="loadStatus" />
	</view>
</template>

<script setup>
import { formatRelativeTime } from '@/utils/timeFormat.js';
import utils from '@/utils/utils.js';

// 定义props
const props = defineProps({
	postList: {
		type: Array,
		default: () => []
	},
	loadStatus: {
		type: String,
		default: 'loading'
	}
});

function onAvatar(post) {
	uni.navigateTo({
		url: `/pages/user/profile?id=${post.user.id}`
	});
}
</script>

<style lang="scss" scoped>
.post-item {
	background: #fff;
	padding: $base-spacing;
	margin-bottom: 20rpx;
	border-bottom: 1px solid #f5f5f5;
}

.user-info {
	display: flex;
	align-items: center;
	margin-bottom: 20rpx;
}

.avatar {
	width: 80rpx;
	height: 80rpx;
	border-radius: 50%;
	margin-right: 20rpx;
	border: 1rpx solid #f0f0f0;
}

.user-details {
	display: flex;
	flex-direction: column;
	flex: 1;
}

.nickname {
	font-size: 28rpx;
	font-weight: 600;
	color: #333;
	margin-bottom: 8rpx;
}

.time {
	font-size: 24rpx;
	color: #999;
}

.post-content {
	margin-left: 100rpx;

	.title {
		color: #000;
		margin-bottom: 10rpx;
		font-weight: bold;
	}
}

.media-container {
	margin-top: 16rpx;
}

/* 1张图片：大图显示 */
.media-single {
	width: 60%;
}

.media-single-image {
	width: 100%;
	height: 400rpx;
	border-radius: 10rpx;
	object-fit: cover;
	background-color: #000;
}

/* 2张图片：并排显示 */
.media-double {
	display: flex;
	gap: 10rpx;
}

.media-double-image {
	flex: 1;
	height: 240rpx;
	border-radius: 10rpx;
	object-fit: cover;
}

/* 3张及以上：网格布局 */
.media-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10rpx;
}

.media-grid-image {
	width: 100%;
	height: 180rpx;
	border-radius: 10rpx;
}

.reply-data-wrap {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	display: flex;
	padding: 20rpx;
	border-top: 1px solid #eee;
	background-color: #fff;

	padding-bottom: env(safe-area-inset-bottom); // 兼容iOS 11.2+
	// padding-bottom: constant(safe-area-inset-bottom); // 兼容iOS 11.0-11.1

	.tips-wrap {
		display: flex;
		align-items: center;
		background-color: #eee;
		color: #999;
		padding: 20rpx 40rpx;
		border-radius: 100rpx;
		font-size: 28rpx;
		flex: 1;

		.txt {
			margin-left: 10rpx;
		}
	}

	.icon-item {
		display: flex;
		align-items: center;
		margin-left: 40rpx;

		.num {
			margin-left: 10rpx;
		}
	}
}

.reply-input-wrap {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	display: flex;
	padding: 20rpx;
	border-top: 1px solid #eee;
	background-color: #fff;
	display: flex;
	flex-direction: column;

	padding-bottom: env(safe-area-inset-bottom); // 兼容iOS 11.2+
	// padding-bottom: constant(safe-area-inset-bottom); // 兼容iOS 11.0-11.1

	.textarea {
		width: 100%;
		border-radius: 10rpx;
		background-color: #eee;
	}

	.reply-tool-wrap {
		margin-top: 20rpx;
		display: flex;
		justify-content: flex-end;

		.tool-item {
			margin-left: 20rpx;
		}
	}
}

.footer {
	display: flex;
	margin-top: 20rpx;

	.count-item {
		display: flex;
		align-items: center;
		margin: auto;
		font-size: 28rpx;
		color: #999;

		.number {
			margin-left: 10rpx;
		}
	}
}
</style>
